<template>
    <div class="container">
        <home-nav-bar></home-nav-bar>
        <div style="margin-top:60px">
            <div class="d-flex justify-content-between">
                <text class="fs-4"><i class="bi bi-box-seam me-2 text-warning"></i>贡献资源</text>
                <button @click="back" type="button" class="btn btn-outline-success"><i
                        class="bi bi-arrow-left-circle me-2"></i>返回</button>
            </div>
            <div class="row mt-3">
                <div class="col-md-3">
                    <label for="selectType" class="form-label">请先选择提交内容</label>
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="selectType"
                        v-model="formType">
                        <option selected disabled value="">请选择</option>
                        <option value="1">UI设计</option>
                        <option value="2">前端开发</option>
                        <option value="3">便捷工具</option>
                    </select>
                </div>
            </div>
            <div class="mt-3" v-if="formType === ''">
                表单内容选择中...
            </div>
            <div v-if="formType === '1'" class="mt-3">
                <form class="row needs-validation" novalidate>
                    <div class="col-md-3">
                        <label for="validationCustom04" class="form-label">提交板块</label>
                        <select class="form-select form-select-sm" id="validationCustom04" required>
                            <option selected disabled value="">请选择</option>
                            <option value="1">免费素材网站</option>
                            <option value="2">调色网站</option>
                            <option value="3">参考灵感网站</option>
                            <option value="4">设计尺寸</option>
                            <option value="5">图标参考</option>
                            <option value="6">设计模板</option>
                            <option value="7">后台管理开源参考</option>
                            <option value="8">设计研发写作工具</option>
                        </select>
                    </div>
                    <div class="col-md-4  mb-3">
                        <label for="validationCustom01" class="form-label">网站名称</label>
                        <input type="text" class="form-control form-control-sm" id="validationCustom01"
                            v-model="webName" required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="validationCustom02" class="form-label">网站地址</label>
                        <input type="text" class="form-control form-control-sm" id="validationCustom02" v-model="webUrl"
                            required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                    <div class="mb-3 col-md-4 ">
                        <label for="inputGroupFile" class="form-label">上传图标</label>
                        <input type="file" class="form-control form-control-sm" id="inputGroupFile" @change="upload"
                            multiple>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-primary" type="submit">提交内容</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const formType = ref('')
const webName = ref('')
const webUrl = ref('')
const back = () => {
    router.go(-1)
}
const upload = async (e: { target: { files: Blob[]; }; }) => {
    console.log(e.target.files);
    let fileReader = new FileReader();
    fileReader.readAsDataURL(e.target.files[0])
    fileReader.addEventListener('load', () => {
        console.log('fileReader.result', fileReader.result);
    })
}
</script>
<style scoped lang='scss'>

</style>